<template>
	<view class="container">
		<view class="basicInfo">
			<view class="top">
				<img :src="personInfo.headImage">
				</image>
				<view class="name">
					<view class="nick-name">
						{{personInfo.nickname}}
						<view class="sex">
							<img v-if="personInfo.sex === '男'" src="@/assets/img/man.png" alt="">
							<img v-if="personInfo.sex === '女'" src="@/assets/img/woman.png" alt="">
						</view>
						<view v-if="personInfo.vip" class="vipTag">
							<img src="@/assets/img/vip.png" alt="">
							<span>{{personInfo.vip}}</span>
						</view>
						<span class="real" v-if="personInfo.realNameAuth">
							已实名
						</span>
						<span style="color:#999" class="real" v-else>
							未实名
						</span>
					</view>
					<view class="age">
						{{personInfo.age}}岁 现居{{personInfo.address}}
					</view>
				</view>
			</view>
			<view class="advanceInfo">
				<view class="title">
					<text>个人资料</text>
					<view v-if="!personInfo.isGetwechatNum" class="" @click="showDialog(1,'获取联系方式')">
						获取联系方式
					</view>
					<!-- <view v-else @click="copy" class="wechat">
						已解锁联系方式：{{personInfo.wechatNum}}
					</view> -->
				</view>
				<view class="singleInfo">
					<uni-tag v-if="chooseInfo.sex" :text="`找${chooseInfo.sex}朋友`" type="primary" />
					<view class="infoValue">
						上次登录于{{lastLoginTime}}
					</view>
				</view>
				<view class="singleInfo">
					<uni-tag text="真诚指数" type="royal" />
					<view v-if="personInfo.score" class="infoValue">
						{{personInfo.score||''}}
					</view>
				</view>
				<view class="singleInfo">
					<uni-tag text="脱单要求" type="warning" />
					<!-- <view class="infoValue"> -->
					<!-- 须守信 -->
					<!-- </view> -->
					<!-- <view class="infoValue">
						须完善信息
					</view> -->
					<view v-if="personInfo.requirement" class="infoValue">
						{{personInfo.requirement}}
					</view>
				</view>
				<view class="singleInfo">
					<uni-tag text="真诚保金" type="error" />
					<view class="infoValue">
						已缴纳{{personInfo.deposit||0}}元保证金
					</view>
				</view>
				<view class="singleInfo">
					<uni-tag text="兴趣爱好" type="default" />
					<view v-if="personInfo.hobby" class="infoValue">
						{{personInfo.hobby}}
					</view>
				</view>
			</view>
			<view class="labels">
				<view class="tags">
					<view class="tag">

						<uni-tag v-if="personInfo.height" :text="personInfo.height+'cm'" type="primary" />
					</view>
					<view class="tag">
						<uni-tag v-if="personInfo.weight" :text="personInfo.weight+'kg'" type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="education[personInfo.education]&&education[personInfo.education].name"
							type="success" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.occupation" type="warning" />
					</view>
					<!-- <uni-tag text="颜值9分" type="error" /> -->
					<view class="tag">
						<uni-tag :text="personInfo.constellation" type="royal" />
					</view>
					<view class="tag">
						<uni-tag :text="personInfo.family" type="primary" />
					</view>
					<view class="tag">
						<uni-tag :text="'年薪'+(personInfo.annualIncome||'--')+'万'" type="warning" />
					</view>
					<!-- <view class="tag">
						<uni-tag :text="personInfo.hobby" type="success" />
					</view> -->
					<view class="tag">
						<uni-tag :text="localCar[personInfo.car]" type="error" />
					</view>
					<view class="tag">
						<uni-tag :text="localHouse[personInfo.house]" type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="localEmotion[personInfo.emotion]&&localEmotion[personInfo.emotion].name"
							type="primary" />
					</view>
				</view>

			</view>
			<view class="declare">
				<text> {{personInfo.introduction}}</text>
			</view>
			<view class="realData" @click="showDutyFree">
				数据真实性免责
			</view>
			<view class="title choose">
				<text>择友要求</text>
			</view>
			<view class="labels">
				<view class="tags">
					<view class="tag">
						<uni-tag
							:text="(chooseInfo.province||'--')+' · '+(chooseInfo.city||'--')+' · '+(chooseInfo.county||'--')||'/'"
							type="warning" />
					</view>
					<view class="tag">
						<uni-tag :text="(chooseInfo.minHeight||'不限')+' - '+ (chooseInfo.maxHeight||'不限')+' cm'"
							type="primary" />
					</view>
					<view class="tag">
						<uni-tag :text="(chooseInfo.minWeight||'不限')+' - '+(chooseInfo.maxWeight||'不限')+' kg'"
							type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="(chooseInfo.minAge||'不限')+' - '+(chooseInfo.maxAge||'不限')+' 岁'" type="royal" />
					</view>
					<view class="tag">
						<uni-tag :text="education[chooseInfo.education]&&education[chooseInfo.education].name"
							type="success" />
					</view>
					<view class="tag">
						<uni-tag :text="localCar[chooseInfo.car]" type="error" />
					</view>
					<view class="tag">
						<uni-tag :text="localHouse[chooseInfo.house]" type="default" />
					</view>
					<view class="tag">
						<uni-tag :text="localEmotion[chooseInfo.emotion]&&localEmotion[chooseInfo.emotion].name"
							type="primary" />
					</view>
					<view class="tag">
						<uni-tag :text="'年薪'+(chooseInfo.annualIncome||'--')+'万'" type="warning" />
					</view>
				</view>
			</view>
			<view class="title album">
				<text>相册</text>
				<view class="" @click="!personInfo.isGetAlbum&&showDialog(3,'申请查看私密相册')">
					{{personInfo.isGetAlbum?(personInfo.isGetAlbum===2?'私密相册申请中':'已开通私密相册'):'申请查看私密相册'}}
				</view>
			</view>
			<Album @click.native="gotoAlbum" :list="imageList" class="album"></Album>
		</view>
		<view class="bottom">
			<view class="concern" @click="focus">
				<!-- <uni-icons type="star" color="#da910d" size="25"></uni-icons> -->
				<img v-show='personInfo.type===0' style="margin:auto;width:22px;height:22px" src="./image/focus.png"
					alt="">
				<img v-show="personInfo.type!==0" style="margin:auto;width:22px;height:22px" src="./image/star.jpeg"
					alt="">
				{{personInfo.type===0?'关注':'已关注'}}
			</view>
			<button class="share" @click="share">
				<!-- <uni-icons type="paperplane" color="" size="25"></uni-icons> -->
				<img style="margin:auto;width:22px;height:22px" src="./image/share.png" alt="">
				分享
			</button>
			<view class="chat" @click="goToMessage">
				<!-- <uni-icons type="chat" color="#18bc37" size="25"></uni-icons> -->
				<img style="margin:auto;width:22px;height:22px" src="./image/message.png" alt="">
				留言
			</view>
			<view class="warn" @click="goToReport()">
				<img style="margin:auto;width:22px;height:22px" src="./image/report.png" alt="">
				<!-- <uni-icons type="info-filled" color="#e65339" size="25"></uni-icons> -->
				举报
			</view>
		</view>
		<image src="./image/share1.png" class="share-img" v-if="showShareImg" @click="()=>showShareImg = false">
		</image>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog type="error" cancelText="否" confirmText="是" :title="dialogMsg"
					:content="dialogContent" @confirm="dialogConfirm"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	const defaultImg = {
		id: 999,
		uid: 9999,
		photo: 'https://img1.baidu.com/it/u=2104289662,2325749837&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=200'
	}
	import Album from './album';
	import {
		url,
		request,
		login
	} from '@/service/api.js'
	import {
		localData,
		localCar,
		localHouse
	} from '@/pages/tabBar/Discover/data.js'
	export default {
		data() {
			return {
				uid: '',
				dialogMsg: '',
				//1.联系方式 2.真实性 3.相册 4.留言 
				dialogType: '',
				dialogContent: '',
				imageList: [],
				localCar: localCar,
				conversationId: '',
				localEmotion: localData[3].submenu,
				localHouse: localHouse,
				education: localData[2].submenu,
				lastTime: '',
				lastLoginTime: '',
				showShareImg: false,
				personInfo: {
					address: '',
					age: '',
					annualIncome: '',
					car: '',
					city: "",
					constellation: "",
					county: "",
					education: 0,
					emotion: 0,
					family: "",
					headImage: "",
					height: '',
					hobby: "",
					hometown: "",
					house: '',
					introduction: "",
					isGetAlbum: '',
					isGetwechatNum: '',
					name: "",
					nickname: "",
					province: "",
					sex: "",
					wechatNum: null,
					weight: '',
					occupation: ''
				},
				chooseInfo: {
					annualIncome: null,
					car: null,
					city: "",
					county: "",
					education: null,
					emotion: null,
					house: null,
					id: null,
					maxAge: null,
					maxHeight: null,
					maxWeight: null,
					minAge: 0,
					minHeight: null,
					minWeight: null,
					province: "",
					sex: null,
					uid: null,
					updateTime: null,

				}
			};
		},
		onLoad(param) {
			this.uid = param.uid
		},
		onShow() {
			this.checkLockMsg()
			this.init()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '我正在使用缘诉交友，快来和我成为好友吧~',
				path: `/pages/tabBar/Home/Home`
			}
		},
		components: {
			Album
		},
		methods: {
			share() {
				this.showShareImg = true
			},
			copy() {
				navigator.clipboard.writeText(this.personInfo.wechatNum).then(() => {
					uni.showToast({
						title: '复制成功'
					})
				})
			},
			checkLockMsg() {
				request(url.getConversation, 'get', {
					uid: this.uid
				}).then(res => {
					console.log('msg', res)
					if (res.status === 200) {
						if (res.data && res.data.conversationId) {
							this.conversationId = res.data.conversationId
						}
					}
				})
			},
			goToMessage() {
				if (this.conversationId) {
					uni.navigateTo({
						url: '/pages/MessageDetail/MessageDetail?conversationId=' + this.conversationId +
							'&nickname=' + this.personInfo.nickname
					})
				} else {
					this.showDialog(4, '留言')
				}
			},
			showDutyFree() {
				uni.showModal({
					title: '数据真实性免责声明！',
					content: '如何识别对方是一个真诚交友的人？请仔细查看对方的真诚指数！开通会员、真诚指数越高，则可信度越高，否则反之。如果您诚心交友，请自觉提升您的真诚指数。用户个人信息页展示的数据均由用户自行填写，平台通过个人提报的认证资料已对用户的部分认证资料进行核实，但用户的成长环境、性格、脾气、秉性、恋爱经历、家庭情况等等的平台无法做到完全的数据核实，不承担相关的法律责任。您在使用缘诉的同时，需接受本声明，否则请停止使用。网络交友有风险，请尽可能选择真诚指数高的用户进行沟通交友。谢谢您的支持和理解！',
					showCancel: false,
					confirmColor: "#FC9380",
					success: function(res) {}
				});
			},
			goShare() {
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用缘诉交友，快来和我成为好友吧~",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			dialogConfirm() {
				console.log(this.dialogType)
				switch (this.dialogType) {
					case 1:
						request(url.unlockContact, 'get', {
							uid: this.uid
						}).then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
								this.init();
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							})
						})
						break;
					case 2:
						break;
					case 3:
						request(url.unlockAlbum, 'get', {
							uid: this.uid
						}).then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: '相册查看申请成功，请及时关注动态消息查看申请结果。',
									icon: 'none'
								})
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							})
						})
						break;
					case 4: // 解锁留言
						request(url.unlockMsg, 'get', {
							uid: this.uid
						}).then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: '解锁成功',
									icon: 'none'
								})
								this.checkLockMsg();
								this.init();
							} else {
								uni.showToast({
									title: res.msg,
									icon: 'none'
								})
							}
						}).catch(err => {
							uni.showToast({
								title: err.msg,
								icon: 'none'
							})
						})
						break;
					default:
						break;
				}
			},
			focus() {
				console.log(this.uid)
				request(url.focus, 'GET', {
					uid: this.uid
				}).then(res => {
					console.log('focus', res)
					if (res.status === 200) {
						uni.showToast({
							title: '操作成功'
						})
						this.init();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.msg,
						icon: 'error'
					})
				})
			},
			showDialog(type, title) {
				this.dialogType = type;
				this.dialogMsg = title;
				switch (type) {
					case 1:
						this.dialogContent =
							'是否确认消耗100点缘分值获取对方的联系方式？若对方设置联系方式为公开，可直接获取对方的联系方式；若对方申请联系方式为隐藏，则需要对方同意后获取，若对方拒绝，则缘分值不予退还。';
						break;
					case 2:
						this.dialogContent = '海量用户平台、个人信息无法做到完全真实准确、进行免责声明。';
						break;
					case 4:
						this.dialogContent = '是否确认消耗20点缘分值解锁与对方的在线留言功能？';
						break;
					default:
						this.dialogContent = '是否确认消耗50点缘分值查看对方的私密相册？您可在对方同意后查看对方的私密相册，若对方拒绝，则缘分值不予退还。';
						break;
				}
				this.$refs.alertDialog.open()
			},
			init() {
				request(url.getPersonInfo, 'GET', {
					uid: this.uid
				}).then(res => {
					if (res.status === 200) {
						console.log('个人信息', res)
						this.personInfo = res.data
						this.lastTime = res.time
						this.lastLoginTime = this.personInfo.lastLoginTime
						request(url.getChooseInfo, 'GET', {
							uid: this.uid
						}).then(res => {
							console.log('择友信息', res)
							this.chooseInfo = res.data
						})
						request(url.getAlbum, 'GET', {
							page: 1,
							limit: 1000,
							uid: this.uid
						}).then(res => {
							console.log(res)
							this.imageList = []
							if (this.personInfo.isGetAlbum) {
								this.imageList = res.data
							} else {
								res.data.forEach(item => {
									if (item.type === 1) {
										this.imageList.push(item)
									} else {
										this.imageList.push(defaultImg)
									}
								})
							}
						})
					}
					// 未完善注册
					if (res.status === 207) {
						uni.showModal({
							title: '提示',
							content: '请完成注册后继续浏览',
							cancelText: '取消',
							confirmText: '去注册',
							success: function(res) {
								if (res.confirm) {
									console.log('用户点击确定');
									uni.navigateTo({
										url: '/pages/register/register'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
									uni.navigateBack()
								}
							}
						})
					}

				})

			},
			goToReport() {
				uni.navigateTo({
					url: `/pages/report/report?uid=${this.uid}`,

				})
			},
			gotoAlbum() {
				if (this.personInfo.isGetAlbum) {
					uni.navigateTo({
						url: `/pages/PersonalDetail/PersonalAlbum?uid=${this.uid}`
					})
				} else {
					showDialog(3, '申请查看私密相册')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		box-sizing: border-box;
		clear: both;
	}

	.share-img {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.realData {
		margin-top: 10px;
		border: 1px solid #FC9380;
		border-radius: 100px;
		font-size: 11px;
		color: #FC9380;
		padding: 2px 4px;
		width: fit-content;
		float: right;
	}

	.advanceInfo {
		padding-bottom: 10px;
		border-bottom: 1px solid #dcdcdc;
	}

	.container {
		box-sizing: border-box;
		width: 100%;
		// height: 100%;
		background-color: #fff;
		padding: 15px;
		padding-bottom: 80px;
	}

	.focus-icon {
		background: url('./image/focus.png') no-repeat center/cover;
		width: 22px;
		height: 22px;
	}

	.basicInfo {
		.top {
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-bottom: 10px;
			border-bottom: 1px solid #dcdcdc;

			img {
				border-radius: 100px !important;
				flex-shrink: 0;
				width: 90px;
				height: 90px;
			}
		}



		.name {
			display: flex;
			flex-direction: column;
			margin-left: 10px;
			max-width: 100%;
			overflow: hidden;
			font-size: 15px;

			.nick-name {
				font-size: 17px;
				display: flex;
				flex-direction: row;
				align-items: center;

				.real {
					font-size: 13px;
					color: #41C4D3;
				}
			}

			.age {
				margin-top: 3px;
				font-size: 13px;
				color: #999;

				span {
					margin-left: 5px;
					margin-right: 4px;
					font-size: 14px;
					color: #b0925b;
				}
			}

			.local {
				margin-top: 3px;
				font-size: 13px;
				color: #999;
			}
		}

		.info {
			padding: 5px 4% 5px 4%;
			margin-top: 10px;

			.tags {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.tag {
					min-height: 30px;
				}

				/deep/ .uni-tag {
					min-height: 35px;
					margin: 5px 5px;
				}
			}
		}
	}

	.title {
		margin: 10px 0px 10px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&.choose {
			padding-bottom: 10px;
			border-bottom: 1px solid #dcdcdc;
		}

		&.album {
			border-bottom: 1px solid #dcdcdc;
		}

		/deep/ span {
			font-size: 13px;
			color: #888888;
		}

		view {
			border: 1px solid #FC9380;
			border-radius: 100px;
			font-size: 11px;
			color: #FC9380;
			padding: 2px 4px;
		}

		.wechat {
			border: none;
			color: #999;
		}
	}

	.sex {
		margin: 0 5px;
		display: flex;

		img {
			width: 7px !important;
			height: 9px !important;
		}
	}

	.vipTag {
		font-size: 10px;
		font-family: SimHei;
		color: #E16531;

		img {
			width: 9px !important;
			height: 9px !important;
		}

	}

	.singleInfo {
		display: flex;
		align-items: center;
		margin: 10px 0;

		.infoValue {
			font-size: 13px;
			padding: 2px 7px;
			background: #C4C4C4;
			margin: 0 5px;
			border-radius: 3px;
			color: #fff;
		}
	}

	.labels {
		padding: 5px 0px 5px 0px;
		margin-top: 10px;

		.tags {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.tag {
				min-height: 30px;
			}

			/deep/ .uni-tag {
				margin: 5px 10px 5px 0px;
			}
		}
	}

	.declare {
		margin-top: 10px;
		font-size: 13px;
		padding: 10px;
		background-color: #eee;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		height: 50px;
		align-items: center;
		background-color: #fff;
		box-shadow: 0upx 8upx 25rpx rgba(0, 0, 0, 0.2);

		.concern {
			// color: #da910d;
		}

		.chat {
			// color: #18bc37;
		}

		.warn {
			// color: #e65339;
		}

		view {
			font-size: 10px;
			color: #888;
			display: flex;
			flex-direction: column;
			flex: 1;
			text-align: center;
		}

		button {
			font-size: 10px;
			color: #888;
			display: flex;
			flex-direction: column;
			flex: 1;
			text-align: center;
			padding: 0;
			background-color: transparent;
			line-height: 1.5;

			&::after {
				border: none;
			}
		}
	}

	.album {
		padding: 15px 0 15px 15px;
	}
</style>
<style>
	.uni-tag--primary {
		background-color: #41C4D3;
		border-color: #41C4D3;
	}

	.uni-tag--success {
		background-color: #68BB73;
		border-color: #68BB73;
	}

	.uni-tag--warning {
		background-color: #FCC163;
		border-color: #FCC163;
	}

	.uni-tag--error {
		background-color: #FC9380;
		border-color: #FC9380;
	}

	.uni-tag--default {
		background-color: #B46CB3;
		border-color: #B46CB3;
	}
</style>
